<template>
  <a-layout style="height: 100vh;">
    <a-layout-sider
        width="300px"
        theme="light"
        style="padding: 16px"
    >
      <a-input-search style="margin-bottom: 16px" placeholder="搜索文件"/>
      <a-tree v-model:expandedKeys="expandedKeys" :tree-data="treeData">
        <template #title="{ key: treeKey, title }">
          <a-dropdown :trigger="['contextmenu']">
            <span>{{ title }}</span>
            <template #overlay>
              <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
                <a-menu-item key="1" :icon="h(CloudUploadOutlined)">上传文件</a-menu-item>
                <a-menu-item key="2" :icon="h(FolderAddOutlined)">新建文件夹</a-menu-item>
                <a-menu-item key="3" style="color: red" :icon="h(DeleteOutlined)">删除文件(夹)</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </a-tree>
    </a-layout-sider>
    <a-layout>
      <a-layout-header :style="{ background: '#fff', padding: 0}">
        <div style="font-size: 20px; font-weight: 600;margin-left: 20px;float: left">
          管理后台
        </div>
        <div style="float: right; margin-right: 20px">
          <a-button type="primary" danger @click="logout">退出登录</a-button>
        </div>
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px 0' }">
        <div style="margin-bottom: 16px">
          <a-breadcrumb>
            <a-breadcrumb-item>Home</a-breadcrumb-item>
            <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
            <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
            <a-breadcrumb-item>An Application</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        <a-dropdown :trigger="['contextmenu']">
          <div :style="{ padding: '24px', background: '#fff', minHeight: '360px',display: 'flex',flexWrap: 'wrap', }">
            <div style="width: 160px;margin: 10px ;" v-for="it in 50">
              <a-dropdown :trigger="['contextmenu']">
                <img style="max-width: 100%;  height: auto; " src="../assets/2.jpg"/>
                <template #overlay>
                  <a-menu>
                    <a-menu-item key="1" :icon="h(CloudUploadOutlined)">删除</a-menu-item>
                    <a-menu-item key="2" :icon="h(FolderAddOutlined)">新建文件夹</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
              <div style="text-align: center;font-size: 14px">两只猫</div>
            </div>
          </div>
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" :icon="h(CloudUploadOutlined)">上传文件</a-menu-item>
              <a-menu-item key="2" :icon="h(FolderAddOutlined)">新建文件夹</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import {watch, ref, h} from 'vue';
import {CloudUploadOutlined, FolderAddOutlined, DeleteOutlined} from '@ant-design/icons-vue';
import request from "../axios/axios.js";
import {message} from "ant-design-vue";
import router from "../router/index.js";



const treeData = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          {title: '0-0-0-0', key: '0-0-0-0'},
          {title: '0-0-0-1', key: '0-0-0-1'},
          {title: '0-0-0-2', key: '0-0-0-2'},
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          {title: '0-0-1-0', key: '0-0-1-0'},
          {title: '0-0-1-1', key: '0-0-1-1'},
          {title: '0-0-1-2', key: '0-0-1-2'},
        ],
      },
    ],
  },
];
const onContextMenuClick = (treeKey: string, menuKey: string | number) => {
  console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
};
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);

watch(expandedKeys, () => {
  console.log('expandedKeys', expandedKeys);
});
//退出登录
const logout = () => {
  request.delete('/api/user/logout').then(res=>{
    if (res.data.code === 0) {
      message.success("退出成功")
      localStorage.removeItem('token');
      router.replace('/')
    }
  })
}
</script>

<style scoped>


</style>
